<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浩浩卜卦</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="./index.css">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#D97706', // 温暖的橙色
                        secondary: '#1E40AF', // 深蓝色
                        accent: '#8B5CF6', // 紫色
                        neutral: '#1F2937', // 深灰色
                        light: '#F9FAFB', // 浅灰色
                        background: '#FFFBEB', // 米白色背景
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Noto Serif SC', 'serif']
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .yao-animation {
                transition: all 0.5s ease-in-out;
            }
            .yao-flash {
                animation: flash 0.3s ease-in-out;
            }
            @keyframes flash {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.3; }
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .yao-container {
                @apply relative w-full max-w-md mx-auto;
            }
            .yao-label {
                @apply absolute -left-10 text-sm font-medium text-neutral/70;
            }
            .hexagram-card {
                @apply bg-white rounded-xl shadow-md p-6 border border-primary/10;
            }
            .hexagram-title {
                @apply text-xl font-serif font-bold text-neutral mb-1;
            }
            .hexagram-desc {
                @apply text-sm text-neutral/70 mb-4;
            }
            .hexagram-text {
                @apply text-sm text-neutral/80 font-serif italic;
            }
            .yao-text {
                @apply text-sm text-neutral/70;
            }
        }
    </style>
</head>

<body class="bg-background min-h-screen font-sans overflow-x-hidden">
    <!-- 顶部导航 -->
    <header class="header bg-gradient-to-r from-primary to-primary/80 text-white py-4 px-6 shadow-md">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl md:text-3xl font-bold tracking-wide">
                <i class="fa fa-yelp mr-2"></i>浩浩卜卦
            </h1>
            <div class="hidden md:flex space-x-4">
                <a href="#" class="hover:text-white/80 transition-colors">关于</a>
                <a href="#" class="hover:text-white/80 transition-colors">解卦指南</a>
                <a href="#" class="hover:text-white/80 transition-colors">历史记录</a>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="container mx-auto p-4 md:p-8 mt-4 md:mt-8">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-primary/10">
            <div class="flex flex-col md:flex-row">
                <!-- 卦象显示区 - 左侧 -->
                <section
                    class="gua w-full md:w-1/2 p-6 md:p-8 bg-gradient-to-br from-accent/5 to-secondary/5 flex flex-col">
                    <h2 class="text-xl md:text-2xl font-bold text-neutral mb-6 flex items-center">
                        <i class="fa fa-book mr-2 text-primary"></i>当前卦象
                    </h2>

                    <!-- 卦名和解释 -->
                    <div id="gua-info" class="mb-8 text-center hexagram-card">
                        <h3 class="hexagram-title">水火既济</h3>
                        <p class="hexagram-desc">离上坎下</p>
                        <div class="border-t border-gray-100 pt-3">
                            <p class="hexagram-text">既济：亨小，利贞。初吉终乱。</p>
                        </div>
                    </div>

                    <!-- 爻线区域 -->
                    <div class="flex-1 yao-container">
                        <!-- 上爻 -->
                        <div class="yaobox w-full flex items-center mb-6 relative">
                            <label class="yao-label">上爻</label>
                            <div class="yao w-full h-3 rounded-full bg-neutral/20 flex">
                                <span class="zuo w-1/2 h-full bg-neutral"></span>
                                <span class="you w-1/2 h-full bg-transparent"></span>
                            </div>
                        </div>

                        <!-- 五爻 -->
                        <div class="yaobox w-full flex items-center mb-6 relative">
                            <label class="yao-label">五爻</label>
                            <div class="yao w-full h-3 rounded-full bg-neutral/80 flex">
                                <span class="zuo w-1/2 h-full bg-neutral"></span>
                                <span class="you w-1/2 h-full bg-neutral"></span>
                            </div>
                        </div>

                        <!-- 四爻 -->
                        <div class="yaobox w-full flex items-center mb-6 relative">
                            <label class="yao-label">四爻</label>
                            <div class="yao w-full h-3 rounded-full bg-neutral/20 flex">
                                <span class="zuo w-1/2 h-full bg-neutral"></span>
                                <span class="you w-1/2 h-full bg-transparent"></span>
                            </div>
                        </div>

                        <!-- 三爻 -->
                        <div class="yaobox w-full flex items-center mb-6 relative">
                            <label class="yao-label">三爻</label>
                            <div class="yao w-full h-3 rounded-full bg-neutral/80 flex">
                                <span class="zuo w-1/2 h-full bg-neutral"></span>
                                <span class="you w-1/2 h-full bg-neutral"></span>
                            </div>
                        </div>

                        <!-- 二爻 -->
                        <div class="yaobox w-full flex items-center mb-6 relative">
                            <label class="yao-label">二爻</label>
                            <div class="yao w-full h-3 rounded-full bg-neutral/80 flex">
                                <span class="zuo w-1/2 h-full bg-neutral"></span>
                                <span class="you w-1/2 h-full bg-neutral"></span>
                            </div>
                        </div>

                        <!-- 初爻 -->
                        <div class="yaobox w-full flex items-center relative">
                            <label class="yao-label">初爻</label>
                            <div class="yao w-full h-3 rounded-full bg-neutral/80 flex">
                                <span class="zuo w-1/2 h-full bg-neutral"></span>
                                <span class="you w-1/2 h-full bg-neutral"></span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 操作区 - 右侧 -->
                <section class="input w-full md:w-1/2 p-6 md:p-8 bg-white flex flex-col">
                    <h2 class="text-xl md:text-2xl font-bold text-neutral mb-6 flex items-center">
                        <i class="fa fa-cogs mr-2 text-secondary"></i>卜卦方式
                    </h2>

                    <!-- 按钮区域 -->
                    <div id="button-container" class="w-full max-w-md">
                        <!-- 手动输入 -->
                        <button id="manual-btn"
                            class="w-full py-4 px-6 mb-4 bg-primary text-white rounded-xl shadow-md flex items-center justify-center btn-hover">
                            <i class="fa fa-hand-pointer-o mr-3 text-xl"></i>
                            <span class="text-lg">手动设定卦象</span>
                        </button>

                        <!-- 自动卜算 -->
                        <button id="auto-btn"
                            class="w-full py-4 px-6 bg-secondary text-white rounded-xl shadow-md flex items-center justify-center btn-hover">
                            <i class="fa fa-random mr-3 text-xl"></i>
                            <span class="text-lg">随机自动卜算</span>
                        </button>
                    </div>

                    <!-- 手动输入表单 (默认隐藏) -->
                    <div id="manual-form" class="w-full max-w-md hidden">
                        <div class="hexagram-card mb-6">
                            <h3 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fa fa-pencil-square-o mr-2 text-primary"></i>
                                手动设定卦象
                            </h3>

                            <!-- 爻线选择 -->
                            <div class="space-y-5">
                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium">上爻:</span>
                                    <div class="flex gap-4">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao6" value="yin" class="form-radio text-primary"
                                                checked>
                                            <span class="ml-2 flex items-center">
                                                <span class="w-8 h-1 bg-neutral/20 mr-1"></span>
                                                <span class="w-8 h-1 bg-neutral/20"></span>
                                                <span class="ml-1">阴爻</span>
                                            </span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao6" value="yang"
                                                class="form-radio text-primary">
                                            <span class="ml-2 flex items-center">
                                                <span class="w-16 h-1 bg-neutral"></span>
                                                <span class="ml-1">阳爻</span>
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium">五爻:</span>
                                    <div class="flex gap-4">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao5" value="yin" class="form-radio text-primary">
                                            <span class="ml-2 flex items-center">
                                                <span class="w-8 h-1 bg-neutral/20 mr-1"></span>
                                                <span class="w-8 h-1 bg-neutral/20"></span>
                                                <span class="ml-1">阴爻</span>
                                            </span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao5" value="yang" class="form-radio text-primary"
                                                checked>
                                            <span class="ml-2 flex items-center">
                                                <span class="w-16 h-1 bg-neutral"></span>
                                                <span class="ml-1">阳爻</span>
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium">四爻:</span>
                                    <div class="flex gap-4">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao4" value="yin" class="form-radio text-primary"
                                                checked>
                                            <span class="ml-2 flex items-center">
                                                <span class="w-8 h-1 bg-neutral/20 mr-1"></span>
                                                <span class="w-8 h-1 bg-neutral/20"></span>
                                                <span class="ml-1">阴爻</span>
                                            </span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao4" value="yang"
                                                class="form-radio text-primary">
                                            <span class="ml-2 flex items-center">
                                                <span class="w-16 h-1 bg-neutral"></span>
                                                <span class="ml-1">阳爻</span>
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium">三爻:</span>
                                    <div class="flex gap-4">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao3" value="yin" class="form-radio text-primary">
                                            <span class="ml-2 flex items-center">
                                                <span class="w-8 h-1 bg-neutral/20 mr-1"></span>
                                                <span class="w-8 h-1 bg-neutral/20"></span>
                                                <span class="ml-1">阴爻</span>
                                            </span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao3" value="yang" class="form-radio text-primary"
                                                checked>
                                            <span class="ml-2 flex items-center">
                                                <span class="w-16 h-1 bg-neutral"></span>
                                                <span class="ml-1">阳爻</span>
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium">二爻:</span>
                                    <div class="flex gap-4">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao2" value="yin" class="form-radio text-primary">
                                            <span class="ml-2 flex items-center">
                                                <span class="w-8 h-1 bg-neutral/20 mr-1"></span>
                                                <span class="w-8 h-1 bg-neutral/20"></span>
                                                <span class="ml-1">阴爻</span>
                                            </span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao2" value="yang" class="form-radio text-primary"
                                                checked>
                                            <span class="ml-2 flex items-center">
                                                <span class="w-16 h-1 bg-neutral"></span>
                                                <span class="ml-1">阳爻</span>
                                            </span>
                                        </label>
                                    </div>
                                </div>

                                <div class="flex items-center justify-between">
                                    <span class="text-sm font-medium">初爻:</span>
                                    <div class="flex gap-4">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao1" value="yin" class="form-radio text-primary">
                                            <span class="ml-2 flex items-center">
                                                <span class="w-8 h-1 bg-neutral/20 mr-1"></span>
                                                <span class="w-8 h-1 bg-neutral/20"></span>
                                                <span class="ml-1">阴爻</span>
                                            </span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="yao1" value="yang" class="form-radio text-primary"
                                                checked>
                                            <span class="ml-2 flex items-center">
                                                <span class="w-16 h-1 bg-neutral"></span>
                                                <span class="ml-1">阳爻</span>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex gap-3">
                            <button id="submit-manual"
                                class="flex-1 py-3 px-6 bg-primary text-white rounded-lg shadow-md btn-hover">
                                <i class="fa fa-check mr-2"></i>提交
                            </button>
                            <button id="cancel-manual"
                                class="flex-1 py-3 px-6 bg-gray-200 text-gray-700 rounded-lg shadow-md btn-hover">
                                <i class="fa fa-times mr-2"></i>取消
                            </button>
                        </div>
                    </div>

                    <!-- 自动卜算结果 (默认隐藏) -->
                    <div id="result-container" class="w-full max-w-md hidden">
                        <div class="hexagram-card mb-6">
                            <h3 class="text-lg font-semibold mb-4 flex items-center">
                                <i class="fa fa-info-circle mr-2 text-secondary"></i>
                                卜算结果
                            </h3>

                            <div class="flex justify-between items-center mb-4">
                                <div>
                                    <p class="hexagram-title" id="result-gua-name">水火既济</p>
                                    <p class="hexagram-desc" id="result-gua-desc">离上坎下</p>
                                </div>
                                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center">
                                    <i class="fa fa-yelp text-primary text-xl"></i>
                                </div>
                            </div>

                            <div class="border-t border-gray-100 pt-4">
                                <h4 class="font-medium mb-2">卦辞</h4>
                                <p class="hexagram-text" id="result-gua-text">既济：亨小，利贞。初吉终乱。</p>
                            </div>

                            <div class="mt-4 pt-4 border-t border-gray-100">
                                <h4 class="font-medium mb-2">爻辞解析</h4>
                                <div id="yao-analysis" class="space-y-2">
                                    <p class="yao-text">上六：濡其首，厉。</p>
                                    <p class="yao-text">九五：东邻杀牛，不如西邻之禴祭，实受其福。</p>
                                    <p class="yao-text">六四：繻有衣袽，终日戒。</p>
                                    <p class="yao-text">九三：高宗伐鬼方，三年克之，小人勿用。</p>
                                    <p class="yao-text">六二：妇丧其茀，勿逐，七日得。</p>
                                    <p class="yao-text">初九：曳其轮，濡其尾，无咎。</p>
                                </div>
                            </div>
                        </div>

                        <button id="new-calculate"
                            class="w-full py-3 px-6 bg-secondary text-white rounded-xl shadow-md btn-hover">
                            <i class="fa fa-refresh mr-2"></i>重新卜算
                        </button>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer bg-neutral text-white py-6 mt-8">
        <div class="container mx-auto text-center">
            <p class="text-sm">© 2025 浩浩卜卦 | 周易智慧</p>
            <p class="text-xs mt-2 text-white/60">本应用仅供娱乐，不代表专业命理分析</p>
        </div>
    </footer>

    <script type="module" src="./index.js"></script>
</body>

</html>